<template>
  <div class="ui_detailrobbing" style="padding-top:46px">
    <van-nav-bar title="订单详情" left-arrow fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
      <span style="color: #333;" slot="right">客服</span>
    </van-nav-bar>
   <OrderDetailContent></OrderDetailContent>
    <div class="footer">
      <div class="price_cash">
        <button>抢单</button>
      </div>
    </div>
  </div>
</template>

<script>
import OrderDetailContent from '../../component/orderdetail/OrderDetailContent'
export default {
  name: "detailrobbing",
  components:{ OrderDetailContent },
   methods: {
      back() {
        this.$router.go(-1);
      },
   } 
};
</script>

<style lang="less" scoped>
.ui_detailrobbing {
  .popup {
    width: 620px;
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    .popup_header {
      height: 55px;
      padding-bottom: 25px;
      text-align: right;
      .iconfont {
        font-size: 30px;
      }
    }
    .steps {
      .step {
        display: flex;
        color: #999;
        line-height: 1;
        .step_l {
          width: 70px;
          padding-bottom: 45px;
          text-align: center;
          p {
            margin: 0;
            &.p1 {
              color: #5c5c5c;
            }
            &.p2 {
              font-size: 20px;
            }
          }
        }
        .step_c {
          position: relative;
          width: 45px;
          .step_circle {
            width: 12px;
            height: 12px;
            margin: 11px auto;
            border-radius: 12px;
            background-color: #999;
          }
          .step_line {
            position: absolute;
            top: 11px;
            left: 50%;
            margin-left: 0.5px;
            width: 1px;
            height: 100%;
            background-color: #c5c5c5;
            z-index: -1;
          }
        }
        .step_r {
          flex: 1;
          padding-bottom: 45px;
          font-size: 28px;
          line-height: 44px;
        }
      }
    }
  }
  .address {
    margin-top: 20px;
    padding: 30px;
    color: #5c5c5c;
    background-color: #fff;
    .box {
      display: flex;
      .box_l {
        flex: 1;
      }
    }
  }
  .bottom {
    margin-top: 20px;
    padding: 30px;
    background-color: #fff;
    text-align: right;
    .btn {
      //width: 132px;
      height: 56px;
      font-size: 24px;
      line-height: 56px;
      border-radius: 28px;
      color: #333;
    }
  }
  .footer {
    width: 100%;
    height: 136px;
    text-align: center;
    padding: 30px 50px;
    position: fixed;
    border-top: 1px solid #e1e1e1;
    background: #fff;
    bottom: 0px;
    button{
      width:690px;
      height:80px;
      border-radius: 50px;
      border:none;
      outline:none;
      background:#f7a427;
      color:#fff;
      font-size:32px;
    }
  }
}
</style>

